<template>
  <div class="content" id="ReconciliationVariance" v-loading="loading">
    <!--头部-->
    <div class="header-setting">
      <a-breadcrumb class="breadcrumb">
        <a-breadcrumb-item>
          <a href="../main">首页</a>
        </a-breadcrumb-item>
        <a-breadcrumb-item>清分管理-</a-breadcrumb-item>
        <a-breadcrumb-item>对账差异</a-breadcrumb-item>
      </a-breadcrumb>
      <!--查询条件-->
      <div class="box-condition-body">
        <div class="box-condition-item" style="justify-content: flex-start">
          <div
            style="
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin-right: 50px;
            "
          >
            <template>
              <a-input-search
                placeholder="批次号"
                style="width: 200px"
                v-model="batchNo"
              />
            </template>
          </div>
          <div
            style="
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin-right: 50px;
            "
          >
            <template>
              <a-input-search
                placeholder="钱包订单号"
                style="width: 200px"
                v-model="walletOrderNo"
              />
            </template>
          </div>
          <div style="display: flex; align-items: center">
            <template>
              <a-select
                showSearch
                placeholder="处理状态"
                optionFilterProp="children"
                style="width: 200px"
                allowClear
                v-model="searchType"
                @select="selectPark"
                @change="selectParkChange"
              >
                <a-select-option
                  v-for="p in typeOption"
                  :key="p.value"
                  :value="p.value"
                  >{{ p.label }}
                </a-select-option>
              </a-select>
            </template>
          </div>
          <div class="box-condition-item" style="padding-top: 20px">
            <template>
              <div style="margin: auto 50px">
                <a-range-picker
                  id="range-picker"
                  :showTime="{
                    format: 'HH:mm:ss',
                  }"
                  format="YYYY-MM-DD HH:mm"
                  :placeholder="['钱包交易日期开始', '钱包交易日期结束']"
                  @ok="onOk"
                  @change="onChange"
                  :value="rangePickerValue()"
                />
              </div>
            </template>
          </div>
          <div class="box-condition-item" style="padding-top: 20px">
            <template>
              <div style="margin: auto 50px">
                <a-range-picker
                  id="range-picker"
                  :showTime="{
                    format: 'HH:mm:ss',
                  }"
                  format="YYYY-MM-DD HH:mm"
                  :placeholder="['对账时间开始', '对账时间结束']"
                  @ok="onOkMoney"
                  @change="onChangeMoney"
                  :value="rangePickerValueMoney()"
                />
              </div>
            </template>
          </div>
          <div
            style="
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin-right: 50px;
            "
          >
            <template>
              <a-button icon="search" type="primary" style="margin: 0 0 0 20px" @click="queryData"
                >查询</a-button
              >
              <a-button icon="sync" style="margin: 0 0 0 20px" @click="reset"
                >重置</a-button
              >
            </template>
          </div>
        </div>
      </div>
    </div>

    <!--表单-->
    <div class="box-form">
      <!--工具栏-->
      <div class="box-tool">
        <div class="box-title"></div>
        <div style="display: flex">
          <a-button type="primary" @click="updateReconciliationType">修改对账差异</a-button>
        </div>
      </div>

      <!--数据表格-->
      <div class="box-table">
        <a-table
          :columns="columns"
          :dataSource="dataSource"
          :pagination="pagination"
          :customRow="customRow"
          bordered
          size="small"
          :rowClassName="setRowClassName"
          @change="tableChange"
          :rowKey="(record) => record.id"
        >
          <template slot="diffType" slot-scope="text">
            <template v-if="text == 1"> 商户漏单 </template>
            <template v-else-if="text == 2"> 钱包漏单 </template>
            <template v-else-if="text == 3"> 金额一致，状态不符 </template>
            <template v-else-if="text == 4"> 钱包短款,金额不符 </template>
            <template v-else-if="text == 5"> 钱包长款,金额不符 </template>
            <template v-else-if="text == 6"> 钱包长款,状态不符 </template>
          </template>
          <template slot="handleStatus" slot-scope="text">
            <template v-if="text == 0"> 未处理 </template>
            <template v-else-if="text == 1"> 已处理 </template>
          </template>
        </a-table>
      </div>
    </div>

    <!--编辑修改-->
    <a-modal
      title="修改对账差异"
      v-model="showUpdateReconciliationType"
      :width="400"
      @ok="editClick"
      @cancel="hideAddPages"
    >
      <div class="viewBody">
        <div class="viewItem">
          <div class="itemText itemText1">修改对账差异</div>
          <div style="margin: 0 50px 0 0px; width: 200px">
            <a-select
              showSearch
              placeholder="处理状态"
              optionFilterProp="children"
              style="width: 200px"
              allowClear
              v-model="searchVartanceType"
              @select="selectParkVartance"
            >
              <a-select-option
                v-for="p in typeOption"
                :key="p.value"
                :value="p.value"
                >{{ p.label }}
              </a-select-option>
            </a-select>
          </div>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script>
import apiClarify from "../../api/sorting/difference";
// 标题行
const columns = [
  {
    title: "id",
    dataIndex: "id",
  },
  {
    title: "对账批次号",
    dataIndex: "batchNo",
  },
  {
    title: "账单时间",
    dataIndex: "billDate",
  },
  {
    title: "商户订单号",
    dataIndex: "businessOrderNo",
  },
  {
    title: "商户实收(元)",
    dataIndex: "businessPaidIn",
  },
  {
    title: "商户交易日期",
    dataIndex: "businessTradeTime",
  },
  {
    title: "商户交易状态",
    dataIndex: "businessTradeStatus",
  },
  {
    title: "钱包订单号",
    dataIndex: "walletOrderNo",
  },
  {
    title: "钱包实收(元)",
    dataIndex: "walletPaidIn",
  },
  {
    title: "钱包交易日期",
    dataIndex: "walletTradeTime",
  },
  {
    title: "钱包交易状态",
    dataIndex: "walletTradeStatus",
  },
  {
    title: "差异类型",
    dataIndex: "diffType",
    scopedSlots: { customRender: "diffType" },
  },
  {
    title: "处理状态",
    dataIndex: "handleStatus",
    scopedSlots: { customRender: "handleStatus" },
  },
  {
    title: "对账日期",
    dataIndex: "createdTime",
  },
];

const dataSource = [];

const queryCondition = {
  limit: "100",
  curr: "1",
  batchNo: "",
  walletOrderNo: "",
  handleStatus: "",
  clarifyTimeStart: "",
  clarifyTimeEnd: "",
  walletTradeTimeStart: "",
  walletTradeTimeEnd: "",
};

export default {
  name: "coupon",
  data() {
    return {
      /**表格**/
      columns: columns,
      dataSource: dataSource,
      /*分页插件*/
      pagination: {
        showTotal: (total) => `共${total}条`,
        total: 0,
        current: 1,
        defaultCurrent: 1,
        showQuickJumper: true,
        defaultPageSize: 100,
      },
      /*表格固定头部*/
      scroll: {
        y: 550,
      },
      tableState: {
        rowId: -1,
      },
      /*当前选中的行数据*/
      currRowData: "",
      /**下拉框**/
      allowClear: true,
      /**处理状态**/
      typeOption: [
        { value: 0, label: "未处理" },
        { value: 1, label: "已处理" },
      ],
      /*收费时间日期*/
      momentArr: [],
      moneyTimeArr: [],

      //业主名称 id
      batchNo: "",
      walletOrderNo: "",
      settlementStatus: "",
      searchType: undefined,
      searchVartanceType: undefined,
      queryCondition,

      //选中行数据
      rowItems: "",
      //模态框显示隐藏
      showUpdateReconciliationType: false,
      loading:false
    };
  },

  methods: {
    /**组件部分相关方法**/
    tableChange(page) {
      this.queryCondition.curr = page.current;
      this.queryData();
      this.queryCondition.curr = 0;
    },
    customRow(record) {
      return {
        on: {
          //   事件
          click: () => {
            this.rowItems = record;
            this.tableState.rowId = record.id;
          },
        },
      };
    },
    setRowClassName(record) {
      return record.id === this.tableState.rowId ? "clickRowStyl" : "";
    },

    /* ---------------------- 条件筛选 ---------------------- */
    onChange(dates) {
      this.momentArr = dates;
    },
    onOk(value) {
      this.momentArr = value;
      this.queryData();
    },
    rangePickerValue() {
      return this.momentArr;
    },

    onChangeMoney(dates) {
      this.moneyTimeArr = dates;
    },
    onOkMoney(value) {
      this.moneyTimeArr = value;
      this.queryData();
    },
    rangePickerValueMoney() {
      return this.moneyTimeArr;
    },

    selectPark(value) {
      this.searchType = value;
      this.queryData();
    },
    selectParkChange(value) {
      if (value == undefined || value == "") {
        this.searchType = undefined;
        this.queryCondition.curr = 1;
        this.queryData();
      }
    },
    selectParkVartance(value) {
      this.searchVartanceType = value;
    },
    reset() {
      this.queryCondition = {
        limit: "100",
        curr: "1",
      };
      this.batchNo = "";
      this.walletOrderNo = "";
      this.searchType = undefined;
      this.momentArr = [];
      this.moneyTimeArr = [];

      this.queryData();
    },

    /** 操作相关(crud) **/
    queryData() {
      this.loading = true;
      let items = {
        batchNo: this.batchNo,
        walletOrderNo: this.walletOrderNo,
        handleStatus: this.searchType || -1,
        createdTimeStart:
          this.momentArr.length == 0
            ? ""
            : this.momentArr[0].format("YYYY-MM-DD HH:mm:ss"),
        createdTimeEnd:
          this.momentArr.length == 0
            ? ""
            : this.momentArr[1].format("YYYY-MM-DD HH:mm:ss"),
        walletTradeTimeStart:
          this.moneyTimeArr.length == 0
            ? ""
            : this.moneyTimeArr[0].format("YYYY-MM-DD HH:mm:ss"),
        walletTradeTimeEnd:
          this.moneyTimeArr.length == 0
            ? ""
            : this.moneyTimeArr[1].format("YYYY-MM-DD HH:mm:ss"),
      };
      let params = Object.assign({}, this.queryCondition, items);
      apiClarify
        .postListDifferencePage(params)
        .then((data) => {
          let { list, total, pageNum, pageSize } = data.data;
          let array = list || [];
          array = array.map((item, index) => {
            return { ...item, no: total - (pageNum - 1) * pageSize - index };
          });
          this.dataSource = array;
          this.pagination.total = total;
          this.pagination.current = pageNum;
          this.loading = false;
        })
        .catch((err) => {
          console.log(err);
          this.loading = false;
        });
    },

    //修改对账差异
    updateReconciliationType() {
      if (this.rowItems != "") {
        this.searchVartanceType = this.rowItems.handleStatus;
      } else {
        this.$message.warning("请选择需要修改的对账记录 ！");
        return;
      }
      this.showUpdateReconciliationType = true;
    },
    async editClick() {
      this.rowItems.handleStatus = this.searchVartanceType;
      await apiClarify
        .postUpdateDifference(this.rowItems)
        .then((data) => {
          if (data.code == 2000) {
            this.$message.success("修改成功！");
          }
        })
        .catch((err) => {
          console.log(err);
          this.$message.error("修改失败 ！");
        });
      await this.hideAddPages();
    },
    hideAddPages() {
      this.queryData();
      this.showUpdateReconciliationType = false;
    },
  },
  /*页面初始化渲染后执行*/
  mounted() {
    this.queryData();
  },
};
</script>

<style lang="less" scoped>
.ant-table td {
  white-space: nowrap;
}

.content {
  width: 100%;
  height: 100%;
}

.header-setting {
  width: 100%;
  height: 174px;
  background: #fff;
}

.header-setting .breadcrumb {
  margin-left: 41px;
  padding-top: 15px;
}

/*表格行选中背景颜色*/
.clickRowStyl {
  background-color: #c1e0fd;
}

.box-condition-body {
  padding-left: 40px;
  padding-right: 40px;
  background: #fff;
}

.box-condition-item {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

/* 表单 */
.box-form {
  padding-left: 40px;
  padding-right: 40px;
  min-height: 705px;
  background: #fff;
  margin-top: 8px;
}

.box-form .box-tool {
  padding-top: 11px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.box-form .box-table {
  margin-top: 12px;
}

.box-tool button {
  margin: 0 0 0 10px;
}

/*轮播*/
.modalBox {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.modalBox .playImg {
  position: relative;
  width: 60%;
}

.modalBox .fromBox {
  width: 35%;
}

.modalBox .fromBox input {
  margin-bottom: 15px;
}

.modalBox .playImg ul.imgList {
  width: 100%;
  display: flex;
  align-items: center;
  position: relative;
}

.modalBox .playImg .img {
  width: 100%;
  height: 200px;
}

.modalBox .playImg .img img {
  display: block;
  width: 100%;
  height: 100%;
}

.modalBox .playImg .pointBox {
  position: absolute;
  bottom: 10px;
  width: 100%;
}

.modalBox .playImg .pointBox ul {
  display: flex;
  justify-content: center;
}

.modalBox .playImg .pointBox li.point {
  width: 10px;
  height: 10px;
  display: inline-block;
  border-radius: 50%;
  margin: 0 10px;
  background: #000;
}

.modalBox .playImg .pointBox li.active {
  background: #ff7255;
}

.array {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  opacity: 1;
  position: absolute;
  font-size: 30px;
}

.array .left,
.array .right {
  color: #fafafa;
  cursor: pointer;
}

/*.array .right{color:#999;cursor:pointer}*/
.array .left:hover {
  color: #333;
}

.array .right:hover {
  color: #333;
}

/* box-correction-popup */
.box-correction-popup {
  padding: 20px;
  height: 555px;
  /* flex */
  display: flex;
  align-items: center;
}

.box-correction-popup .box-image {
  padding: 0 15px;
  width: 888px;
  height: 500px;
}

.box-correction-popup .box-image .icon-image {
  width: 100%;
  height: 100%;
}

.box-correction-popup .box-correct {
  margin: 0 15px;
  width: 310px;
  height: 500px;
}

.box-correction-popup .box-correct .item-correct {
  margin-top: 20px;
  display: flex;
  align-items: center;
}

.box-correction-popup .box-correct .item-correct .text-correct {
  font-weight: 300;
  font-size: 14px;
  width: 100px;
}

.box-correction-popup .box-correct .item-correct .text-value {
  font-weight: 300;
  font-size: 14px;
  line-height: 1.428571429;
  color: #020202;
}

/* box-dispatch-item */
.box-dispatch-item {
  display: flex;
  align-items: center;
}

.box-dispatch-item .text-key {
  width: 200px;
  /* text */
  font-size: 14px;
  font-weight: 300;
  color: #797979;
}

.box-dispatch-item .text-value {
  width: 265px;
}

.box-title {
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.box-title span {
  display: inline-block;
  background: cornflowerblue;
  border-radius: 5px;
  padding: 10px 25px;
  color: #fff;
  font-size: 14px;
  margin: 2% 4%;
  cursor: pointer;
}

#ReconciliationVariance {
  /deep/.ant-table-body {
    margin: 0;
  }
}
</style>
